﻿<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"  xmlns="http://www.w3.org/1999/xhtml">
<xsl:output method="xhtml"/>
<xsl:template match="/">
	<html>
		<head>
			<!--<link rel="stylesheet" href="css/demo_page.css" type="text/css" media="all"/>
			<link rel="stylesheet" href="css/demo_table.css" type="text/css" media="all"/>-->
			<link rel="stylesheet" href="css/my-theme/jquery-ui-1.9.2.custom.css" type="text/css" media="all"/>
			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
			<!--<script type="text/javascript" src="http://www.datatables.net/download/build/jquery.dataTables.js"></script>-->
			<script type="text/javascript">
			/*$(document).ready(function() {
				$('#table').dataTable({
					        //"sScrollY": 500,
							"bJQueryUI": true,
							"bPaginate": true,
							"sPaginationType": "two_button"
				});				
			} );*/
			$(function() {
				$('#dialog').dialog({
					autoOpen: false,
					show: {
						effect: "blind",
						duration: 250
					},
					hide: {
						effect: "explode",
						duration: 500
					},
					modal: true,
					width: 'auto',
					buttons: {
						Ok: function() {
							$(this).dialog("close");
						}
					}
				});
				$('button').button({
					icons: {
						primary: "ui-icon-document"
					},
					text: false
				});
				$('.opener').click(function() {
					$('#dialog').html($(this).attr('data-tracklist'));
					$('#dialog').dialog('open');
				});
				$( "#accordion" ).accordion();
				$( ".tabs" ).tabs();
			});

			</script>
		</head>
		<body>
			<h2>My Vinyl Collection</h2>
			<!--<table id="table">
			<thead>
				<tr>
					<th>Pochette</th>
					<th>Titre</th>
					<th>Artiste</th>
					<th>Genre</th>
					<th>Année</th>
					<th>Liste des pistes</th>
				</tr>
			</thead>
			<tbody>-->
			<div id="accordion">
			<xsl:for-each-group select="releases/release" group-by="artists/artist/name[1]">
			<xsl:sort select="artists/artist/name"/>
			
				<h3><xsl:value-of select="current-grouping-key()"/></h3>
				<div class="tabs">
					<ul>
						<li><a href="#tabs-1"></a></li>
					</ul>
					<div id="tabs-1">
					</div>
				</div>
				<!--<tr>
					<td><a href="{images/image[1]/@uri}"><img src="{images/image[1]/@uri150}"/></a></td>
					<td><xsl:value-of select="title"/></td>
					<td></td>
					<td><xsl:value-of select="genres/genre[1]"/></td>
					<td><xsl:value-of select="released"/></td>
					<td>
						<button class="opener">
						<xsl:attribute name="data-tracklist">
							<xsl:for-each select="tracklist/track">
								<xsl:value-of select="position"/>.<xsl:value-of select="title"/> (<xsl:value-of select="duration"/>)<xsl:text>&lt;br/&gt;</xsl:text>
							</xsl:for-each>
						</xsl:attribute>
						</button>
					</td>
				</tr>-->
			</xsl:for-each-group>
			</div>
			<div id="dialog" title="Liste des pistes"></div>
		</body>
	</html>
</xsl:template>
</xsl:stylesheet>